<template>
  <div class="myset">
    <!-- 头像 -->
    <div class="head_img_wrapper">
      <span class="title">头像</span>
      <img :src="show_user_info.image | renderImg(90,90)" alt="" class="head">
    </div>
    <!-- 中间部分 -->
     <div class="main_box">
       <!-- 姓名 -->
      <div class="item">
        <div class="title">
          姓名
        </div>
        <div class="filed">
          <input v-model="show_user_info.name" class="ipt_nickname" type="text">
        </div>
      </div>
      <!-- 手机号 -->
       <div class="item">
        <div class="title">
          手机号
        </div>
        <div class="filed">
          <input v-model="show_user_info.phone" class="ipt_nickname" type="text">
        </div>
      </div>
      <!-- 邮箱 -->
       <div class="item">
        <div class="title">
          邮箱
        </div>
        <div class="filed">
          <input v-model="show_user_info.email" class="ipt_nickname" type="text">
        </div>
      </div>
      <!-- 出生日期 -->
       <div class="item">
        <div class="title">
          出生日期
        </div>
        <div class="filed">
          <input v-model="show_user_info.agedate" class="ipt_nickname" type="text" v-on:click="openPicker()">
        </div>
      </div>
      <!-- 修改密码 -->
       <!-- <div class="item">
        <div class="title">
          修改密码
        </div>
        <div class="filed">
         <i class="iconfont icon-gt"></i>
        </div>
      </div> -->
    </div>
    <div class="sub">
      <div class="submit">
        确认修改
      </div>
    </div>
    <mt-datetime-picker
  v-model="age_date"
  ref="picker"
  type="date"
  :startDate=startDate
  :endDate=endDate
  year-format="{value} 年"
  month-format="{value} 月"
  date-format="{value} 日"
  @confirm="handleConfirm">
</mt-datetime-picker>
  </div>
</template>

<script>
import Vue from "vue";
import { DatetimePicker } from 'mint-ui';
Vue.component(DatetimePicker.name, DatetimePicker);
export default {
  name: "myset",
  data() {
    return {
      startDate:new Date('1950-1-1'),
      endDate:new Date(),
      age_date:"",
      show_user_info:{
        name:"小明",
        image:"",
        phone:"13553064373",
        email:"huixueban@163.com",
        agedate:"1995-02-16",
      }
    };
  },
  mounted: function() {
    this.$nextTick(function() {});
  },
  methods: {
    // 选择时间插件
    openPicker() {
        this.$refs.picker.open();
      },
    handleConfirm(value){
      if(typeof(value)=='string'){
        
      }
      var y=value.getFullYear();
      var m=value.getMonth()<10?'0'+value.getMonth():value.getMonth();
      var d=value.getDate()<10?'0'+value.getDate():value.getDate();
      this.show_user_info.agedate=y+'-'+m+'-'+d;
    }
  }
};
</script>
<style scoped lang="less">
.myset {
  background: #f2f2f2;
  overflow: auto;
  padding-bottom:0.2rem;
  .head_img_wrapper {
    background: #fff;
    margin: 0.1rem 0;
    padding: 0 0.15rem;
    height: 0.6rem;
    display: flex;
    align-items: center;
    .title {
      flex: 1;
      font-size: 0.16rem;
    }
    img.head {
      height: 0.45rem;
      width: 0.45rem;
      border-radius: 50%;
    }
  }
  // 中间开始
  .main_box {
    padding: 0 .15rem 0.05rem .1rem;
    background: #fff;
    .item {
      display: flex;
      align-items: center;
      height: .5rem;
      border-bottom: 1px solid #f2f2f2;
        &:last-child {
          border-bottom:none;
        }
      .title {
        flex: 1
      }
      .filed {
        color: gray;
        .ipt_nickname {
          color: gray;
          height: .4rem;
          line-height: .4rem;
          text-align: right;
        }
      }
    }
  }
  .sub{
    margin-top:1.5rem;
    padding:0 0.15rem;
    background:#f2f2f2;
    .submit{
      height: 0.4rem;
      line-height:0.4rem;
      color:#ffffff;
      font-size:0.16rem;
      text-align: center;
      background:#24ceae;
      border-radius:0.05rem;
    }
  }
}
</style>


